import styled from "styled-components";

export const ShopcarTableStyle = styled.div` 
        position:absolute;
        width:100%;
        bottom:0;
        left:0;
        height:60%;
        background-color:white;
        z-index:4;

    
        .shopcar_heade{
            height:30%;
            width:100%;
         
            display:flex;
            flex-flow:column;
            justify-content:center;
            .head_container{
                position:relative;
                /* margin-top:20%; */
                margin:0 auto;
                width:90%;
                height:80%;
                        
                display:flex;
                align-items:end;
                .float-img{
                    position:absolute;
                    top:0;
                    right:0;
                    svg{
                        width:1.5rem;
                        height:1.5rem;
                    }
                }
                .left_pic{
                    width:25%;
                    img{
                        width:100%;
                    }
                }
                .right_box{
                    margin-left:auto;
                    width:70%;
                    display:flex;
                    flex-flow:column;
                    svg{
                        width:1.5rem;
                        height:1.5rem;
                    }
                    .box_body{
                        display:flex;
                        flex-flow:row;
                        align-items:center;
                    }
                    .box_footer{
                        
                    }
                    .mid{
                        svg{
                            height:3rem;
                            width:2rem;
                        }
                    }
                }
            }
        }
        .shopcar_middle{
           
            width:100%;
            height:55%;
            .head_middle{
              
                margin:0 auto;
                height:1px;
                width:90%;
                background-color:#bdcbdf;
                border-top:1px solid #bdcbdf;
                
            }
            .middle_contaner{
                width:90%;
                margin:0 auto;
                display:flex;
                flex-flow:column;
              
                .chosesize{ 
                    .zhanwei{
                        width:100%;
                        height:1.5rem;
                    }
                    .fonttitle{
                        font-size:.8rem;
                        color:#687ca0;
                    }
                    .sizes{
                       
                        
                        width:100%;
                        display:flex;
                        flex-flow:row;
                        flex-wrap:wrap;
                        .asize{
                            padding:.5rem 1rem;
                            border:2px solid #ecf1f6;
                            margin-right:1.5rem;
                            margin-top:1rem;
                        }
                        .active{
                            padding:.5rem 1rem;
                            margin-right:1.5rem;
                            margin-top:1rem;
                            border:2px solid black;
                            
                        }
                    }
                    
                }
                .chosenumber{
                    margin-top:1.5rem;
                    .fonttitle{
                        font-size:.8rem;
                        color:#687ca0;
                      
                    }
                    .sizes{
                    
                       .changenumber{
                            position:relative;
                            margin-top:0.5rem;
                            width:25%;
                            height:1rem;
                            padding: 0.5rem 1rem 0.5rem 1rem;
                            border:1px solid #e5ebf3;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            input{  
                                margin-left:1.5rem;
                                width:2rem;
                                background:none;  
                                outline:none;  
                                border:none;
                            }
                            .decrement svg{
                                position:absolute;
                                top:.5rem;
                                left:.5rem;
                                width:1.2rem;
                                height:1.2rem;
                            }
                            .increment svg{
                                position:absolute;
                                top:.5rem;
                                right:.5rem;
                                width:1.2rem;
                                height:1.2rem;
                            }
                         
                       }
                    }
                }
            }
        }
        .shopcar_footer{
            width: 100%;
            height:15%;
            border-top:2px solid  #bdcbdf;
            display:flex;
            justify-content:center;
            align-items:center;
            .footer_box{
                width:80%;
                height:70%;
                background-color:black;
                display:flex;
                justify-content:center;
                align-items:center;
                
                .title{
                    font-weight:500;
                    color:white;
                    font-size:1rem; 
                }
            }
        }
    
`